<script setup lang="ts">
import { ComponentInternalInstance, getCurrentInstance, ref } from 'vue'
import { sendNotification, getOSInfo } from "../plugins/vuelectron"
import { el } from 'element-plus/es/locale/index.mjs';
import { onMounted } from 'vue';
import axios from 'axios';
import { Md5 } from 'ts-md5';
const username = ref('')
const password = ref('')

const showFailDialog = ref(false)
const failReason = ref('')

function checkUsername() {
  if (username.value.length < 1) {
    sendNotification(`登录失败`, `用户名不能为空`);
    return false
  }
  return true
}

function checkPassword() {
  if (password.value.length < 1) {
    sendNotification(`登录失败`, `密码不能为空`);
    return false
  }
  return true
}

function checkIsLogin(): boolean {
  // TODO: 检查是否已经登录，验证token
  if (localStorage.getItem('username') && localStorage.getItem('password')) {
    return true;
  }
  return false;
}

onMounted(() => {
  if (checkIsLogin()) {
    window.location.href = '/user'
  }
})
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

async function login(): Promise<void> {
  console.log(proxy?.$api);
  if (!checkUsername()) {
    failReason.value = '用户名不能为空'
    showFailDialog.value = true
  }
  else if (!checkPassword()) {
    failReason.value = '密码不能为空'
    showFailDialog.value = true
  }
  else {
    // // TODO: 登录逻辑
    // //console.log(username.value, password.value)
    // if (username.value == 'admin' && password.value == 'admin') {
    //   sendNotification(`登录成功`, `欢迎回来，${username.value}`);
    //   localStorage.setItem('username', username.value)
    //   localStorage.setItem('password', password.value)
    //   window.location.href = '/user'
    // }
    // else {
    //   sendNotification(`登录失败`, `用户名或密码错误`);
    // }
    // axios.post($api + )
    // TODO: 32 md5 加密
    let md5Password = new Md5().appendStr(password.value).end();
    let { data } = await axios({ url: '/api/login/login', method: 'post', data: { username: username.value, password: md5Password }, params: {} })
    if (data.code == 0) {
      sendNotification(`登录成功`, `欢迎回来，${username.value}`);
      localStorage.setItem('token', data.data);
    }
    else {
      sendNotification(`登录失败`, `用户名或密码错误`);
    }
    console.log(data);
  }
}

function logout(): void {
  localStorage.removeItem('token');
  window.location.href = '/'
}


</script>

<template>
  <div class="loginpage">
    <h1>登录FAQ平台</h1>
    <el-text class="tip">请联系管理员创建账号</el-text>
    <div>
      {{ $api }}
    </div>
    <div class="login" style="margin-top: 30px;">
      <el-input v-model="username" type="text" placeholder="用户名" style="width: 170px;" />

      <el-input v-model="password" type="password" placeholder="密码" style="width: 170px; margin-left: 10px;" />
      <el-button type="primary" style="width: 70px; margin-left: 10px;" @click="login">
        登录
      </el-button>
    </div>
  </div>

  <el-dialog v-model="showFailDialog" title="登录失败" width="420" align-center>
    <span>{{ failReason }}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="showFailDialog = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>
